<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        html {
            margin: 0;
            height: 100%;
            min-height: 100%;
            font-family: "Helvetica Neue", "Arial", sans-serif;
        }

        body {
            display: flex;
            justify-content: center;
            background: black;
            color: navy;
            overflow: hidden;
        }

        * {
            box-sizing: border-box;
        }

        .scrollsnap-carousel {
            overflow-x: auto;
            overflow-y: hidden;
            width: 100%;
            height: 100%;
            max-width: 100%;
            scroll-snap-type: x mandatory;
            white-space: nowrap;
            padding: 100px 0 0 0;
        }

        .scrollsnap-carousel .slide {
            display: inline-block;
            height: 15%;
            width: 15%;
            flex: 0 0 15%;
            scroll-snap-align: center;
            view-timeline-name: --li-in-and-out-of-view;
            view-timeline-axis: inline;
            animation: linear move-to-top both;
            animation-timeline: --li-in-and-out-of-view;
            perspective: 40em;
            position: relative;
            color: navy;
            transform-origin: bottom;
        }

        .scrollsnap-carousel .slide:first-of-type {
            margin-left: 50%;
        }

        .scrollsnap-carousel .slide:last-of-type {
            margin-right: 50%;
        }

        .scrollsnap-carousel .slide .content {
            border-radius: 10px;
            width: 100%;
            padding-bottom: 100%;
            background: lightblue;
            animation: linear rotateSlide both;
            animation-timeline: --li-in-and-out-of-view;
            position: relative;
        }

        .scrollsnap-carousel .slide .content .content-wrapper {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: linear fadeContent both;
            animation-timeline: --li-in-and-out-of-view;
        }

        .scrollsnap-carousel .slide .content .content-wrapper:after {
            content: "";
            display: block;
            width: 100%;
            height: 50%;
            position: absolute;
            background: linear-gradient(#112d37, black);
            top: 100%;
            left: 0;
            border-radius: 10px 10px 0 0;
        }

        @keyframes rotateSlide {
            0% {
                transform: translateX(-150%) rotateY(-45deg) translateZ(4em) scale(0.5);
                background: black;
            }

            50% {
                transform: rotateY(0deg) translateZ(1em) scale(1.25);
                background: lightblue;
            }

            100% {
                transform: translateX(150%) rotateY(45deg) translateZ(4em) scale(0.65);
                background: black;
            }
        }

        @keyframes fadeContent {
            0% {
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes move-to-top {
            0% {
                z-index: 1;
            }

            50% {
                z-index: 100;
            }

            100% {
                z-index: 1;
            }
        }
        img{
            width: 100%;
            height: 100%;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div class="scrollsnap-carousel">
        <div class="slide">
            <div class="content">
                <div class="content-wrapper">
                   <img  src="https://images.unsplash.com/photo-1730523169782-31cb72f147ff?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                </div>
            </div>
        </div>
        <div class="slide">
            <div class="content">
                <div class="content-wrapper">
                    <img  src="https://images.unsplash.com/photo-1730405704088-3d8f36e32b62?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                </div>
            </div>
        </div>
        <div class="slide">
            <div class="content">
                <div class="content-wrapper">
                    <img src="https://images.unsplash.com/photo-1730407401172-aeed1b1ace5b?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                </div>
            </div>
        </div>
        <div class="slide">
            <div class="content">
                <div class="content-wrapper">
                    <img src="https://images.unsplash.com/photo-1730724583278-151efd042e16?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                </div>
            </div>
        </div>
        <div class="slide">
            <div class="content">
                <div class="content-wrapper">
                   <img src="https://images.unsplash.com/photo-1731000891359-b430173e8491?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                </div>
            </div>
        </div>
        <div class="slide">
            <div class="content">
                <div class="content-wrapper">
                    <img src="https://images.unsplash.com/photo-1731128976871-9dc558f0c3c4?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                </div>
            </div>
        </div>
        <div class="slide">
            <div class="content">
                <div class="content-wrapper">
                    <img src="https://images.unsplash.com/photo-1717764737741-b22a89548750?q=80&w=1970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                </div>
            </div>
        </div>
        <div class="slide">
            <div class="content">
                <div class="content-wrapper">
                   <img src="https://images.unsplash.com/photo-1730405704088-3d8f36e32b62?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                </div>
            </div>
        </div>
    </div>

    <script>
        const carousel = document.querySelector('.scrollsnap-carousel');
        const slideWidth = carousel.children[0].offsetWidth;
        let isScrolling = false;
    
        carousel.addEventListener('wheel', (event) => {
            if (isScrolling) return;
    
            isScrolling = true;
    
            if (event.deltaY > 0) {
                // 向下滚动
                carousel.scrollBy({
                    left: slideWidth,
                    behavior: 'smooth'
                });
            } else {
                // 向上滚动
                carousel.scrollBy({
                    left: -slideWidth,
                    behavior: 'smooth'
                });
            }
    
            setTimeout(() => {
                isScrolling = false;
            }, 1); // 调整滚动间隔时间
        });
    
        // 隐藏滚动条
        document.querySelector('.scrollsnap-carousel').style.overflow = 'hidden';
    </script>
</body>

</html>